{layout name="vote/header" /}
<div id="app">
    <div class="wrapper j_vote">
        <div class="banner">

            <!--banner图-->
            <img :src="banner">
            <!--投票时间投票规则-->
            <div class="date-rules">
                <span class="date">{$vote.vote_btn_name}时间：{$vote.start_time}—{$vote.end_time}</span>
                <span class="rules-btn" id="j-call-rules">活动规则</span>
            </div>
        </div>
        <!--<div>-->
        <!--用户剩余票数-->
        <!--<span id="j_vote_left">0</span>-->
        <!--</div>-->
        <!-- 主区域-->
        <div class="content" >
            <!--tab & search-->
            <div class="search-area clear">
                <!-- 搜索区-->
                <div class="search">
                    <input class="search-input j_search_input" placeholder="{$vote.search_words}" v-model="keyword">
                    <span class="search-btn j_search" @click="search()">搜索</span>
                </div>

                <div class="tab">
                    <span class="current j_reload" @click="reload()">我要{$vote.vote_btn_name}</span>
                    <span class="j_rank" @click="rank()">人气排行</span>
                </div>

            </div>
            <!-- 选手们-->
            <div class="main-content j_acitvity clear" >
                <div class="item" v-for="i,k in list" v-cloak>
                    <span class="item-order" v-if="is_rank==1">Top{{k+1}}</span>

                    <div class="bg-gray">
                        <a @click="toInfo(i.id)">
                            <div class="img-area">
                                <img class="data-img" :src="i.head_img">
                            </div>
                        </a>
                        <i class="iplay"></i>
                        <div class="txt-area clear">
                            <p class="name">
                                <a>{{i.name}}</a>
                            </p>
                            <p class="info">编号:{{i.mid}}</p>
                        </div>
                    </div>

                    <p class="ticket">票数:<span class="now-ticket j_now">{{i.total}}</span></p>

                    <div class="vote-btn j_vote_btn" @click="vote(i.id,i)" v-if="i.enable">
                        {$vote.vote_btn_name}
                    </div>
                    <div class="vote-btn j_vote_btn unable-vote-btn" v-else>
                        {$vote.vote_btn_name}
                    </div>
                </div>

                <!--<button class="more" >更多</button>-->
            </div>
            <div class="more" @click="more()" v-if="enablePage && showMore">加载更多</div>
        </div>

    </div>
    {include file="vote/extend"}

</div>
<script>
    var sms = {
        time:0,//倒计时
        phone:"",
        code:"",
        content:"获取验证码",
    };
    new Vue({
        el:"#app",
        data:{
            is_login:"{$is_login}",
            vote_id:"{$vote.id}",
            is_rank:0,
            banner:"{$banner}",
            all:[],
            list:[],
            keyword:'',
            type_id:"{$type_id}",
            limit:30,
            showMore:false,
            enablePage:true,
            userAgent : "{$app.app_ua}",
            enableCheck : "{$vote.enable_web}",
            //发送短信
            sms:sms,
        },
        created:function(){
            this.getList();
        },
        computed:{
            enable_logout:function () {
                var ua = navigator.userAgent;
                if( ua.indexOf(this.userAgent)<0 && (this.is_login == 1)){
                    return 1;
                }
                return 0;
            }
        },
        methods:{
            //投票
            vote:function (item_id,i) {
                var ua = navigator.userAgent;

                if(!this.checkIsApp()){
                    return ;
                }
                var _this =this;
                $.post("{:url('vote', ['site' => $site_id])}",{vote_id:this.vote_id,item_id:item_id},function (res) {
                    console.log(res);

                    if(res.code){
                        if(res.code == 500){
                            if(ua.indexOf(_this.userAgent)>-1){
                                //app内
                                $('#j-login').trigger('click');
                            }else {
                                //web端未登录
                                $("#j-to-login").removeClass("hide");
                            }
                            return false;
                        }
                    }else {
                        i.total += res.data.add
                    }
                    layer.open({
                        content: res.msg
                        ,skin: 'msg'
                        ,time: 2
                    })
                },'json')

            },
            //排行
            rank:function () {
                this.is_rank = 1;
                $('.j_rank').addClass('current');
                $('.j_reload').removeClass('current');
                this.getList('top');
            },
            //搜索
            search:function () {
                console.log('search');
                this.getList('',this.keyword)
            },
            //刷新
            reload:function () {
                this.is_rank = 0;
                $('.j_reload').addClass('current');
                $('.j_rank').removeClass('current');
                this.getList();
            },
            //跳转到详情页
            toInfo:function(item_id){
                window.location.href="{:url('detail', ['site' => $site_id])}"+"/item_id/"+item_id
            },
            //获取数据
            getList:function (order = '',keyword = '') {
                var _this = this;
                $.post("{:url('getList', ['site' => $site_id])}",{vote_id:_this.vote_id,type_id:_this.type_id,order:order,keyword:keyword},function (res) {
                    _this.all = res.data.list
                    if(!_this.enablePage){
                        _this.list = _this.all
                    }else {
                        //分页
                        _this.list = _this.all.splice(0,_this.limit)
                        if(_this.all.length > 0){
                            _this.showMore = true
                        }else {
                            _this.showMore = false
                        }
                    }
                    _this.$nextTick(function () {
                        _this.dealImgStyle(true);
                    })
                },'json')
            },
            dealImgStyle: function (onload) {
                var img = $('.data-img');
                if (img.length > 0) {
                    if (onload) {
                        img[0].onload = function () {
                            $('.data-img').eq(0).css({
                                "width": "100%",
                                "height": "auto"
                            });
                            var w1 = $('.data-img').eq(0).width();
                            var h1 = $('.data-img').eq(0).height();
                            $('.data-img').each(function () {
                                $(this).width(w1);
                                $(this).height(h1);
                            });
                        }
                    } else {
                        $('.data-img').eq(0).css({
                            "width": "100%",
                            "height": "auto"
                        });
                        var w1 = $('.data-img').eq(0).width();
                        var h1 = $('.data-img').eq(0).height();
                        $('.data-img').each(function () {
                            $(this).width(w1);
                            $(this).height(h1);
                        });
                    }
                }
            },
            more:function(){
                var list = this.all.splice(0,this.limit);
                this.list = this.list.concat(list);
                this.$nextTick(function () {
                    this.dealImgStyle(false);
                })

                if(this.all.length <= 0)
                    this.showMore = false
            },
            checkIsApp:function () {
                return checkApp(this.userAgent,this.enableCheck)
            },
            send_code:function () {
                var _this = this;
                if(_this.sms.time>0){
                    return false;
                }
                if(!_this.checkPhone())
                    return false;

                $.post("/index/vote/send_code",{phone:_this.sms.phone},function (res) {
                    layer.open({
                        content: res.msg
                        ,skin: 'msg'
                        ,time: 2
                    })
                    if(res.code){
                        _this.sms.time = 60;
                        var inter = setInterval(function () {
                            console.log(_this.sms.time)
                            if(_this.sms.time>0){
                                _this.sms.content = "已发送("+_this.sms.time+")";
                            }else {
                                _this.sms.content = "发送验证码";
                                clearInterval(inter);
                            }
                            _this.sms.time--;
                        },1000)
                    }
                },'json')
            },
            web_login:function () {
                var _this = this;
                if(!_this.checkPhone()){
                    return false;
                }
                if(_this.sms.code==""){
                    layer.open({
                        content: "验证码不能未空"
                        ,skin: 'msg'
                        ,time: 2
                    })
                    return false;
                }
                $.post("{:url('web_login', ['site' => $site_id])}",{phone:_this.sms.phone,code:_this.sms.code},function (res) {
                    layer.open({
                        content: res.msg
                        ,skin: 'msg'
                        ,time: 2
                    })
                    if(res.code){
                        setTimeout(function () {
                            // window.location.reload();
                            window.location.href = location.href+'?time='+((new Date()).getTime());
                        },1500)
                    }

                },"json")
            },
            checkPhone:function () {
                var reg = /^\d{11}$/;
                if(this.sms.phone == ''){
                    layer.open({
                        content: "请输入手机号码"
                        ,skin: 'msg'
                        ,time: 2
                    })
                    return false;
                }

                if(!reg.test(this.sms.phone)){
                    layer.open({
                        content: "手机号码格式错误"
                        ,skin: 'msg'
                        ,time: 2
                    })
                    return false;
                }
                return true;
            },
            logout:function () {
                layer.open({
                    content: '确定要退出吗？'
                    ,btn: ['退出', '取消']
                    ,yes: function(index){
                        $.get("{:url('web_logout', ['site' => $site_id])}",function (res) {
                            layer.open({
                                content: res.msg
                                ,skin: 'msg'
                                ,time: 2
                            })
                            if(res.code){
                                setTimeout(function () {
                                    // window.location.reload();
                                    window.location.href = location.href+'?time='+((new Date()).getTime());
                                },1500)
                            }
                        },'json')
                        layer.close(index);
                    }
                });

            },
        },
    })
</script>
